import styled from 'styled-components'

const bg = require('../../assets/bg_ph.jpg')
export const Head = styled.div`
  height: 3.8rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  background: #e4b479 url(${bg}) no-repeat left bottom;
  background-size: 100% auto;
  color: #fff;
  .tx{
    width:  1.95rem;
    height: 1.95rem;
    margin: 0 auto;
    border-radius: 50%;
    padding: .15rem;
    border:0.01rem solid #cdaf7b;
    margin-bottom: .2rem;
  }
  img{
    width: 1.63rem;
    height: 1.63rem;
    padding: .15rem;
    border:0.01rem solid #cdaf7b;
    border-radius: 50%;
  }
  p{
    font-size: .30rem;
    line-height: .36rem;
  }
`

const zan = require('../../assets/img_zan.png')
const zanAt = require('../../assets/img_zan_at.png')
export const RankCont =  styled.ul`
  overflow: hidden;
  background: #fff;
  li{
    font-size: .28rem;
    line-height: .80rem;
    border-bottom: .01rem solid #e6e6e6;
    padding: 0 .30rem;
    background: transparent url(${zan}) no-repeat 96% center;
    background-size: .26rem .28rem;
    &.atthis{
      background-image: url(${zanAt})
    }
    .tx{
      width: .50rem;
      height: .50rem;
      border-radius: 50%;
      margin: 0 .2rem;
      vertical-align: middle;
    }
    span{
      width: .3rem;
      display: inline-block;
      vertical-align: middle;
      img{
        width: .3rem;
        vertical-align: middle;
      }
    }
  }
`